import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Row, Col, Card, Statistic, Typography, Modal, message, Descriptions } from 'antd';
import { Access, useAccess, } from 'umi';
import styles from './Index.less';
import { login, getView } from '@/services/user';
import { QuestionCircleOutlined } from '@ant-design/icons';

const { Title } = Typography;

type overview = {
    Business: {
        checkin: [number, number],
        checkout: [number, number],
        income: [number, number],
    },
    Income: [number, number, number],
};

const Index: React.FC = () => {

    // 获取权限
    const access = useAccess();

    const [explain_visible, setExplain_visible] = useState<boolean>(false);
    const [overview, setOverview] = useState<overview>();

    useEffect(() => {

        const getAllOverview = async () => {
            try {
                const msg = await getView({});
                if (msg.code === 0) {
                    setOverview(msg.body);
                    return;
                }
            } catch (error) {
                message.error(`${error}`);
            }
        };

        getAllOverview();
    }, []);

    return (
        <PageContainer>
            {overview ? (<>
                <Title level={3} >业务数据 <QuestionCircleOutlined style={{ color: '#1890ff' }} onClick={() => {
                    setExplain_visible(true);
                }} /></Title>
                <Row className={styles.row} gutter={16}>
                    <Col span={6}>
                        <Card>
                            <Statistic title="今日入库总数" value={overview.Business.checkin[0] + overview.Business.checkin[1]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="校园入库数" value={overview.Business.checkin[0]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="社区入库数" value={overview.Business.checkin[1]} />
                        </Card>
                    </Col>
                </Row>
                <Row className={styles.row} gutter={16}>
                    <Col span={6}>
                        <Card>
                            <Statistic title="今日出库总数" value={overview.Business.checkout[0] + overview.Business.checkout[1]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="校园出库数" value={overview.Business.checkout[0]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="社区出库数" value={overview.Business.checkout[1]} />
                        </Card>
                    </Col>
                </Row>
                <Row className={styles.row} gutter={16}>
                    <Col span={6}>
                        <Card>
                            <Statistic title="今日退回总数" value={overview.Business.income[0] + overview.Business.income[1]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="校园退回数" value={overview.Business.income[0]} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="社区退回数" value={overview.Business.income[1]} />
                        </Card>
                    </Col>
                </Row>

                <Title level={3}>收入数据</Title>
                <Row className={styles.row} gutter={16}>
                    <Access
                        accessible={!!access.canRoot || !!access.canAdmin}
                    >
                        <Col span={6}>
                            <Card>
                                <Statistic title="今日收入总数" value={((overview.Income[0] + overview.Income[1] + overview.Income[2]) / 100)} />
                            </Card>
                        </Col>
                    </Access>
                    <Col span={6}>
                        <Card>
                            <Statistic title="校园充值收入" value={(overview.Income[0] / 100)} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic title="社区充值收入" value={(overview.Income[1] / 100)} />
                        </Card>
                    </Col>
                    <Access
                        accessible={!!access.canRoot || !!access.canAdmin}
                    >
                        <Col span={6}>
                            <Card>
                                <Statistic title="快递员充值收入" value={(overview.Income[2] / 100)} />
                            </Card>
                        </Col>
                    </Access>
                </Row>
                <Modal
                    width={850}
                    title={"数据说明"}
                    footer={null}
                    open={explain_visible}
                    onCancel={() => {
                        setExplain_visible(false);
                    }}
                    maskClosable={true}>
                    <Descriptions bordered column={1}>
                        <Descriptions.Item label="今日入库数">系统创建订单即算入库数 </Descriptions.Item>
                        <Descriptions.Item label="校园入库数">订单创建时驿站所属的类型为：校园，即校园入库+1 </Descriptions.Item>
                        <Descriptions.Item label="社区入库数">订单创建时驿站所属的类型为：社区，即社区入库+1 </Descriptions.Item>
                        <Descriptions.Item label="今日出库数">订单变为已出库即计算出库数+1 </Descriptions.Item>
                        <Descriptions.Item label="校园出库数">根据入库时订单归属的驿站类型统计，如订单入库时驿站类型为：校园，出库时校园出库数+1</Descriptions.Item>
                        <Descriptions.Item label="社区出库数">根据入库时订单归属的驿站类型统计，如订单入库时驿站类型为：社区，出库时社区出库数+1 </Descriptions.Item>
                        <Descriptions.Item label="今日退回数">订单变为已退回即计算退回数</Descriptions.Item>
                        <Descriptions.Item label="校园退回数">根据入库时订单归属的驿站类型统计，如订单入库时驿站类型为：校园，退回时校园退回数+1</Descriptions.Item>
                        <Descriptions.Item label="社区退回数">根据入库时订单归属的驿站类型统计，如订单入库时驿站类型为：社区，退回时社区退回数+1</Descriptions.Item>
                        <Descriptions.Item label="今日收入总数">邻管家App充值账户充值成功的金额数与邻小蜂App充值成功的金额数</Descriptions.Item>
                        <Descriptions.Item label="校园充值收入">邻管家App充值账户充值成功时，驿站类型为：校园，收入计算至校园</Descriptions.Item>
                        <Descriptions.Item label="社区充值收入">邻管家App充值账户充值成功时，驿站类型为：社区，收入计算至社区</Descriptions.Item>
                        <Descriptions.Item label="快递员充值收入">邻小蜂App充值成功的金额数</Descriptions.Item>
                    </Descriptions>
                </Modal>
            </>) : ''}
        </PageContainer>
    );
};

export default Index;
